<script setup>
import { ref } from "vue";
import bag from "../assets/mybag/bag-container.png";
import cardPic from "../assets/mybag/cardBg.png";
import { showDialog } from "vant";
import emptyAdd from "../assets/myAds/emptyAdd.png";
import { http } from "../services/service";
import { covers } from "../enums/cover";
import { dateFormat } from "../utils/util";
import { useUserStore } from "../store/index";
import { useI18n } from "vue-i18n";
import cardList from "./components/cardList.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const back = () => {
  router.go(-1);
};

const historyLists=ref([
  {
    userName:"李四",
    action:"合成",
    count:"500星",
    cardType:"处女座",
    time:"10-26"
  },
  {
    userName:"李四",
    action:"合成",
    count:"500星",
    cardType:"处女座",
    time:"10-26"
  },
  {
    userName:"李四",
    action:"合成",
    count:"500星",
    cardType:"处女座",
    time:"10-26"
  },
  {
    userName:"李四",
    action:"合成",
    count:"500星",
    cardType:"处女座",
    time:"10-26"
  }
])
const i18nUse = useI18n();
const store = useUserStore();

const value = ref("");
const value1 = ref("");
const cardInfo = ref();
const background = `url(${bag})`;
const show = ref(false);
const sell = () => {
  show.value = true;
};

const needSpendTxt = ref();
const money = ref();
const getCardDetail = (adId) => {
  http.get(`/api/v1/trade/adInfo?adId=${adId}`).then(
    (response) => {
      cardInfo.value = response?.data?.data;
      cardInfo.value.flipped = false;
    },
    () => {}
  );
};

const routerCard = JSON.parse(router.currentRoute.value.query.card);
const getCard = (isBack) => {
  if (isBack) {
    return i18nUse.locale.value === "en"
      ? covers[routerCard.cardId]?.back_en
      : covers[routerCard.cardId]?.back_cn;
  }
  return covers[routerCard.cardId]?.detail;
};
getCardDetail(routerCard.id);

const confirm = () => {
  http
    .get(
      `/api/v1/trade/adBuy?telegramId=${store.getUser?.telegramId}&adId=${routerCard.id}`
    )
    .then((response) => {
      if (response?.data?.code === 200) {
        showToast(i18nUse.t("buy_success"));
        router.push("/trade");
      } else {
        showToast(response.data.message);
      }
    });
};

const flipCard = () => {
  cardInfo.value.flipped = !cardInfo.value.flipped;
};
</script>

<template>
  <van-dialog
    v-model:show="show"
    show-cancel-button
    :confirm-button-text="$t('confirm_buy')"
    :cancel-button-text="$t('cancel_buy')"
    cancel-button-color="#95979E"
    @confirm="confirm"
  >
    <div class="withDrawDialog">
      <div>
        <span> {{ $t("need_spend") }} </span
        ><span> {{ cardInfo?.currentPrice }} </span>
      </div>
    </div>
  </van-dialog>
  <div class="container">
    <div style="position: relative">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="40"
        @click="back()"
        color="#fff"
      />
    </div>
    <div
      class="img-container"
      @click="flipCard()"
      :class="{
        card: true,
        flipped: cardInfo?.flipped,
      }"
    >
      <div class="front">
        <img :src="getCard(false)" alt="" />
      </div>
      <div class="back">
        <img :src="getCard(true)" alt="" />
      </div>
    </div>
    <div>
      <div class="with-title">
        <span>
          {{
            i18nUse.locale.value === "en" ? cardInfo?.enName : cardInfo?.zhName
          }} </span
        ><span> <span style="font-size: 10px;">Odysseus</span>【{{ cardInfo?.cardCode }}】 </span>
      </div>
      <div class="withDraw">
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("district") }}: </span>
          <span>
            {{ cardInfo?.cardType }}
          </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("releasePrice") }}: </span>
          <span>
            {{ cardInfo?.releasePrice }}
          </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("currentPrice") }}: </span>
          <span>
            {{ cardInfo?.currentPrice }}
          </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("changeRate") }}: </span>
          <span>
            {{ cardInfo?.turnoverNumber }}
          </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("inflationRate") }}: </span>
          <span> {{ cardInfo?.cardGrowthRate * 100 }}% </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("issuedBy") }}: </span>
          <span> {{ cardInfo?.nickName }} </span>
        </div>
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("create_time") }}: </span>
          <span> {{ dateFormat(cardInfo?.createTime || "") }} </span>
        </div>
      </div>

      <!-- <div class="withDraw">
        <div class="with-container-history" style="margin-top: 0" v-for="history in historyLists">
          <van-icon name="star-o" color="#B8ABFF"/> 
          <span>{{ history.userName }}</span><span>{{ history.action }}</span>
          <span>{{ history.count }}</span><span>{{ history.cardType }}</span><span>{{ history.time }}</span>
        </div>
      </div> -->

    </div>
    <div class="confirm">
      <van-button type="primary" block @click="sell()">{{
        $t("buy")
      }}</van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.card {
  perspective: 1000px;
  cursor: pointer;
  transition: transform 0.6s;
}

.flipped .front {
  transform: rotateY(180deg);
}

.flipped .back {
  transform: rotateY(0deg);
}

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.front {
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
  transition: transform 0.6s;
}

.back {
  background-color: #e74c3c;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(-180deg);
  transition: transform 0.6s;
}

.confirm {
  width: 70%;
  margin:20px auto;

  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.van-dialog__cancel {
  background-color: red;
}
.with-title {
  width: 340px;
  font-weight: bold;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.withDraw {
  width: 311px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;
  padding: 22px 16px;
  font-size: 16px;

  .with-container {
    display: flex;
    padding: 0 5px;
    justify-content: space-between;
    line-height: 30px;
    > span {
      display: inline-block;
      white-space: nowrap;
    }
  }
  .with-container-history{
    display: flex;
    padding: 10px 5px;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    line-height: 30px;
    border-bottom: 1px solid #424552;
    > span {
      display: inline-block;
      white-space: nowrap;
    }
  }
}

.withDrawDialog {
  padding: 40px;
  font-size: 16px;
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff !important;
  }
}

.icon-left {
  padding-left: 16px;
  padding-top: 40px;
  cursor: pointer;
}

.img-container {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 40px;
    cursor: pointer;
  }

  width: 80%;
  margin: 20px auto;
  height: 205px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
